<template>
  <div class="film">
    <div v-show="showNavBar" class="show-title">
      <nav-bar>
        <div slot="left" class="title" @click="skipCities">
          <p>{{ cities.name }}</p>
          <span class="iconfont icon-jiantouxia"></span>
        </div>
        <p slot="center">电影</p>
      </nav-bar>
      <tab-control
        :tab-control-data="tabControlData"
        ref="tabControlTop"
        @tabControlClick="tabControlClick"
      ></tab-control>
    </div>
    <scroll class="scoll-box" :pullUpLoad="true" ref="scroll" :probeType="3" @scroll="scrollPosition" :scrollbar="true">
      <city-fixed @click="skipCities">{{ cities.name }}</city-fixed>
      <swiper :banner-data="bannerData"></swiper>
      <tab-control
        :tab-control-data="tabControlData"
        ref="tabControlBottom"
        @tabControlClick="tabControlClick"
      ></tab-control>
      <router-view></router-view>
    </scroll>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { banner } from '@/network/film'
import Swiper from 'components/common/swiper/Swiper.vue'
import TabControl from 'components/content/tabControl/TabControl.vue'
import Scroll from 'components/common/scroll/Scroll.vue'
import CityFixed from 'components/content/cityFixed/CityFixed.vue'

export default {
  name: 'Film',
  components: { Swiper, TabControl, Scroll, CityFixed },

  CityFixedname: 'Film',
  data() {
    return {
      bannerData: [],
      tabControlData: [
        { title: '正在热映', path: '/films/nowplaying' },
        { title: '即将上映', path: '/films/comingsoon' }
      ],
      showNavBar: false,
      currentIndex: 2
    }
  },
  created() {
    this.getBanner()
  },
  methods: {
    async getBanner() {
      const { data: res } = await banner(this.cities.cityId, this.currentIndex)
      this.bannerData = res
    },
    // 坐标Y值
    scrollPosition({ y }) {
      this.tabControlTop < -y ? (this.showNavBar = true) : (this.showNavBar = false)
    },
    tabControlClick(index) {
      this.$refs.tabControlTop.currentIndex = index
      this.$refs.tabControlBottom.currentIndex = index
      // this.currentIndex = index + 1
      // this.getBanner()
    },
    skipCities() {
      this.$router.push('/city')
    }
  },
  computed: {
    ...mapState('cities', ['cities']),
    tabControlTop() {
      return this.$refs.tabControlBottom.$el.offsetTop
    }
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.scroll.refresh()
    })
  }
}
</script>

<style lang="scss" scoped>
.film {
  height: 100vh;
}
::v-deep .swiper-pagination-bullet-active {
  background: white !important;
}
::v-deep .swiper-pagination-bullets {
  text-align: right !important;
}
::v-deep .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
}
.scoll-box {
  height: calc(100% - 0.49rem);
}
.title {
  display: flex;
  align-items: center;
  img {
    width: 0.06rem;
    margin-left: 0.05rem;
  }
}
.show-title {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100;
}
.icon-jiantouxia {
  display: inline-block;
  font-size: 0.14rem !important;
  transform: scale(0.7);
}
</style>